{% extends 'sales/base.html' %}
{% load static %}
{% load paginate %}
{% load thumbnail %}
{% block content %}


<div class="main_container">
  <div class="row marl">
    <div class="col-lg-12 text-right">
      <span class="d-inline"><a href="{% url 'marketing:add_email_for_campaigns' %}" class="btn primary_btn"><i
            class="fa fa-plus"></i> Contacts</a></span>
      <span class="d-inline"><a href="{% url 'marketing:add_blocked_domain' %}" class="btn primary_btn"><i
            class="fa fa-plus"></i> Block Domains</a></span>
      <span class="d-inline"><a href="{% url 'marketing:add_blocked_email' %}" class="btn primary_btn"><i
            class="fa fa-plus"></i> Block Emails</a></span>
      
    </div>
  </div>
  

  
  
  

  
  <div class="filter_row list_filter_row_contacts row marl">
    <div class="col-md-12">
      <div class="card">
        <div class="card-body">
          <form id="contacts_filter" method="POST" action="" class="filter_form">
            <div class="card-body">
              <div class="card-title">Filter Contacts</div>
              <div class="row marl">
                <div class="filter_col col-md-2">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Name</label>
                    <input type="text" class="form-control" name="contact_name" value="{{request.POST.contact_name}}">
                  </div>
                </div>
                <div class="filter_col col-md-2">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Email</label>
                    <input type="text" class="form-control" name="contact_email" value="{{request.POST.contact_email}}">
                  </div>
                </div>
                <div class="filter_col col-md-2">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Created By</label>
                    <select name="contact_created_by" id="created_by" class="assigned_users_ form-control">
                      <option value="">
                        ------------------</option>
                      {% for user in created_by_users %}
                      <option value="{{user.id}}" {% if user.id|slugify == request.POST.contact_created_by %}
                        selected="" {% endif %}>
                        {{user.email}}</option>
                      {% endfor %}
                    </select>
                  </div>
                </div>
                <input type="hidden" name="tab_status" id="tab_status">
                <input type="hidden" name="filter_contacts" id="tab_status" value="filter_contacts">
                <div class="filter_col col-lg-2">
                  <div class="form-group buttons_row">
                    <button class="btn btn-primary save" type="submit">Search</button>
                    <a href="{% url 'common:api_settings' %}" class="btn btn-default clear">Clear</a>
                  </div>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  


  
  <div class="filter_row list_filter_row_domains row marl">
    <div class="col-md-12">
      <div class="card">
        <div class="card-body">
          <form id="filter_domains_form" method="POST" action="" class="filter_form">
            <div class="card-body">
              <div class="card-title">Filter Domain</div>
              <div class="row marl">
                <div class="filter_col col-md-2">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Domain</label>
                    <input type="text" class="form-control" name="domain" value="{{request.POST.domain}}">
                  </div>
                </div>
                <input type="hidden" name="tab_status" id="tab_status">
                <input type="hidden" name="filter_blocked_domains" id="tab_status" value="filter_blocked_domains">
                <div class="filter_col col-lg-2">
                  <div class="form-group buttons_row">
                    <button class="btn btn-primary save" type="submit">Search</button>
                    <a href="{% url 'common:api_settings' %}" class="btn btn-default clear">Clear</a>
                  </div>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  

  
  <div class="filter_row list_filter_row_emails row marl">
    <div class="col-md-12">
      <div class="card">
        <div class="card-body">
          <form id="filter_emails_form" method="POST" action="" class="filter_form">
            <div class="card-body">
              <div class="card-title">Filter Contacts</div>
              <div class="row marl">
                <div class="filter_col col-md-2">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Email</label>
                    <input type="text" class="form-control" name="email" value="{{request.POST.email}}">
                  </div>
                </div>
                <input type="hidden" name="tab_status" id="tab_status">
                <input type="hidden" name="filter_blocked_emails" id="tab_status" value="filter_blocked_emails">
                <div class="filter_col col-lg-2">
                  <div class="form-group buttons_row">
                    <button class="btn btn-primary save" type="submit">Search</button>
                    <a href="{% url 'common:api_settings' %}" class="btn btn-default clear">Clear</a>
                  </div>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  

  


  <div class="filter_row row marl">
    <div class="col-md-12 col-lg-12 col-xl-12">
      <div class="table_container_row row marl no-gutters">
        <div class="col-md-12">
          <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item">
              <a class="nav-link active" id="open-tab" data-toggle="tab" href="#open" role="tab" aria-controls="open"
                aria-selected="true">Contacts</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="domains-tab" data-toggle="tab" href="#blocked_domains" role="tab"
                aria-controls="close" aria-selected="false">Blocked Domains</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="emails-tab" data-toggle="tab" href="#blocked_emails" role="tab"
                aria-controls="close" aria-selected="false">Blocked Emails</a>
            </li>
          </ul>
          <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade  show active" id="open" role="tabpanel" aria-labelledby="open">
              <div class="card">
                <div class="card-body">
                  <div class="card-title text-right">
                    <span class="float-left">Contacts - {% if show_pageitems %}
                      {% show_pageitems %}{% else %}
                      {{ contacts|length }}{% endif %}</span>
                    <span class="filter_toggle_contacts">
                      <a href="#" class="primary_btn"><i class="fas fa-filter"></i></a>
                    </span>
                  </div>
                  <div class="table-responsive">
                    <table class="table ">
                      <thead>
                        {% if contacts|length > 0 %}
                        <tr>
                          <th width="5%">ID</th>
                          <th width="15%"> Name</th>
                          <th width="15%">Email</th>
                          <th width="15%">Created by</th>
                          <th width="15%">Created On</th>
                          <th width="10%">Actions</th>
                        </tr>
                        {% endif %}
                      </thead>
                      <tbody>
                        {% if per_page %}
                        {% paginate per_page contacts %}
                        {% else %}
                        {% paginate 10 contacts %}
                        {% endif %}
                        {% for contact in contacts %}
                        <tr class="text-center">
                          <td scope="row">{{ forloop.counter }}</td>
                          <td>{{ contact.name }}</td>
                          <td class="">
                            {{contact.email}}
                          </td>
                          <td>
                            {% if contact.created_by %}
                            {% if contact.created_by.profile_pic %}
                            {% thumbnail contact.created_by.profile_pic "40x40" crop="center" as im %}
                            <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}"
                              title="{{ contact.created_by }}" style="border-radius: 50%" />
                            {% endthumbnail %}
                            {% else %}
                            <img src="{% static 'images/user.png' %}"
                              style="width: 40px;height: 40px;border-radius: 50%;" title="{{ contact.created_by }}" />
                            {% endif %}
                            {% else %}
                            <img src="{% static 'images/user.png' %}"
                              style="width: 40px;height: 40px;border-radius: 50%;" title="{{ contact.created_by }}" />
                            {% endif %}
                          </td>
                          <td title="{{ contact.created_on }}">{{ contact.created_on_arrow }}</td>
                          <td class="actions">
                            {% if request.user.role == 'ADMIN' or request.user.is_superuser %}
                            <a href="{% url 'marketing:edit_email_for_campaigns' contact.id %}"
                              class="btn btn-success edit" title="Edit"><i class="fas fa-pencil-alt"></i></a>
                            <a href="{% url 'marketing:delete_email_for_campaigns' contact.id %}"
                              class="btn btn-danger delete contacts_delete" title="Delete"><i
                                class="fas fa-trash-alt"></i></a>
                            {% endif %}
                          </td>
                        </tr>
                        {% endfor %}
                      </tbody>
                    </table>
                  </div>
                  {%ifequal contacts|length 0%}
                  <h6 class="text-center">No Contacts Found</h6>
                  {%endifequal%}
                  <div class="marl row text-center">
                    {% show_pages %}
                  </div>
                </div>
              </div>
            </div>

            

            <div class="tab-pane fade  " id="blocked_domains" role="tabpanel" aria-labelledby="blocked_domains">
              <div class="card">
                <div class="card-body">
                  <div class="card-title text-right">
                    <span class="float-left">Blocked Domain - {% if show_pageitems %}
                      {% show_pageitems %}{% else %}
                      {{ blocked_domains|length }}{% endif %}</span>
                    <span class="filter_toggle_domains">
                      <a href="#" class="primary_btn"><i class="fas fa-filter"></i></a>
                    </span>
                  </div>
                  <div class="table-responsive">
                    <table class="table ">
                      <thead>
                        {% if blocked_domains|length > 0 %}
                        <tr>
                          <th width="5%">ID</th>
                          <th width="15%">Domain</th>
                          <th width="15%">Created by</th>
                          <th width="15%">Created On</th>
                          <th width="10%">Actions</th>
                        </tr>
                        {% endif %}
                      </thead>
                      <tbody>
                        {% if per_page %}
                        {% paginate per_page blocked_domains %}
                        {% else %}
                        {% paginate 10 blocked_domains %}
                        {% endif %}
                        {% for domain in blocked_domains %}
                        <tr class="text-center">
                          <td scope="row">{{ forloop.counter }}</td>
                          <td>{{ domain.domain }}</td>
                          <td>
                            {% if domain.created_by %}
                            {% if domain.created_by.profile_pic %}
                            {% thumbnail domain.created_by.profile_pic "40x40" crop="center" as im %}
                            <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}"
                              title="{{ domain.created_by }}" style="border-radius: 50%" />
                            {% endthumbnail %}
                            {% else %}
                            <img src="{% static 'images/user.png' %}"
                              style="width: 40px;height: 40px;border-radius: 50%;" title="{{ domain.created_by }}" />
                            {% endif %}
                            {% else %}
                            <img src="{% static 'images/user.png' %}"
                              style="width: 40px;height: 40px;border-radius: 50%;" title="{{ domain.created_by }}" />
                            {% endif %}
                          </td>
                          <td title="{{ domain.created_on }}">{{ domain.created_on_arrow }}</td>
                          <td class="actions">
                            {% if request.user.role == 'ADMIN' or request.user.is_superuser %}
                            <a href="{% url 'marketing:edit_blocked_domain' domain.id %}" class="btn btn-success edit"
                              title="Edit"><i class="fas fa-pencil-alt"></i></a>
                            <a href="{% url 'marketing:delete_blocked_domain' domain.id %}"
                              class="btn btn-danger blocked_domain_delete remove_document" title="Delete"><i
                                class="fas fa-trash-alt"></i></a>
                            {% endif %}
                          </td>
                        </tr>
                        {% endfor %}
                      </tbody>
                    </table>
                  </div>
                  {%ifequal blocked_domains|length 0%}
                  <h6 class="text-center">No Domains Found</h6>
                  {%endifequal%}
                  <div class="marl row text-center">
                    {% show_pages %}
                  </div>
                </div>
              </div>
            </div>

            

            
            <div class="tab-pane fade  " id="blocked_emails" role="tabpanel" aria-labelledby="blocked_emails">
              <div class="card">
                <div class="card-body">
                  <div class="card-title text-right">
                    <span class="float-left">Blocked Emails - {% if show_pageitems %}
                      {% show_pageitems %}{% else %}
                      {{ blocked_emails|length }}{% endif %}</span>
                    <span class="filter_toggle_emails">
                      <a href="#" class="primary_btn"><i class="fas fa-filter"></i></a>
                    </span>
                  </div>
                  <div class="table-responsive">
                    <table class="table ">
                      <thead>
                        {% if blocked_emails|length > 0 %}
                        <tr>
                          <th width="5%">ID</th>
                          <th width="15%">Email</th>
                          <th width="15%">Created by</th>
                          <th width="15%">Created On</th>
                          <th width="10%">Actions</th>
                        </tr>
                        {% endif %}
                      </thead>
                      <tbody>
                        {% if per_page %}
                        {% paginate per_page blocked_emails %}
                        {% else %}
                        {% paginate 10 blocked_emails %}
                        {% endif %}
                        {% for email in blocked_emails %}
                        <tr class="text-center">
                          <td scope="row">{{ forloop.counter }}</td>
                          <td>{{ email.email }}</td>
                          <td>
                            {% if email.created_by %}
                            {% if email.created_by.profile_pic %}
                            {% thumbnail email.created_by.profile_pic "40x40" crop="center" as im %}
                            <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}"
                              title="{{ email.created_by }}" style="border-radius: 50%" />
                            {% endthumbnail %}
                            {% else %}
                            <img src="{% static 'images/user.png' %}"
                              style="width: 40px;height: 40px;border-radius: 50%;" title="{{ email.created_by }}" />
                            {% endif %}
                            {% else %}
                            <img src="{% static 'images/user.png' %}"
                              style="width: 40px;height: 40px;border-radius: 50%;" title="{{ email.created_by }}" />
                            {% endif %}
                          </td>
                          <td title="{{ email.created_on }}">{{ email.created_on_arrow }}</td>
                          <td class="actions">
                            {% if request.user.role == 'ADMIN' or request.user.is_superuser %}
                            <a href="{% url 'marketing:edit_blocked_email' email.id %}" class="btn btn-success edit"
                              title="Edit"><i class="fas fa-pencil-alt"></i></a>
                            <a href="{% url 'marketing:delete_blocked_email' email.id %}"
                              class="btn btn-danger blocked_email_delete remove_document" title="Delete"><i
                                class="fas fa-trash-alt"></i></a>
                            {% endif %}
                          </td>
                        </tr>
                        {% endfor %}
                      </tbody>
                    </table>
                  </div>
                  {%ifequal blocked_emails|length 0%}
                  <h6 class="text-center">No Email Found</h6>
                  {%endifequal%}
                  <div class="marl row text-center">
                    {% show_pages %}
                  </div>
                </div>
              </div>
            </div>
            
          </div>
          <br clear="all">
        </div>
      </div>
    </div>
  </div>

</div>

{% endblock %}
{% block js_block %}
<script type="text/javascript">
  var queryParams = (window.location.search).replace('?', '').split('&').map(param => param.split('=')).reduce((values, [key, value]) => { values[key] = value; return values; }, {})



  if (queryParams.hasOwnProperty('contacts')) {
    $('#open-tab').trigger('click')
  }

  if (queryParams.hasOwnProperty('blocked_domains')) {
    $('#domains-tab').trigger('click')
  }
  if (queryParams.hasOwnProperty('blocked_emails')) {
    $('#emails-tab').trigger('click')
  }

  tab_clicked_contacts = '{{request.POST.filter_contacts}}'
  tab_clicked_domains = '{{request.POST.filter_blocked_domains}}'
  tab_clicked_emails = '{{request.POST.filter_blocked_emails}}'

  if (tab_clicked_contacts.length > 1) {
    $('#open-tab').trigger('click')
  }

  if (tab_clicked_domains.length > 1) {
    $('#domains-tab').trigger('click')
  }

  if (tab_clicked_emails.length > 1) {
    $('#emails-tab').trigger('click')
  }
  // Javascript to enable link to tab
  var url = document.location.toString();
  if (url.match('#')) {
    $('.nav-tabs a[href="#' + url.split('#')[1] + '"]').tab('show');
  }

  // Change hash for page-reload
  $('.nav-tabs a').on('shown.bs.tab', function (e) {
    window.location.hash = e.target.hash;
  })

  $('.contacts_delete').click(function (e) {
    e.preventDefault()
    url = $(this).attr('href')
    if (!confirm('Are you sure you want to delete?'))
      return;
    window.location = $(this).attr('href')
  });
  $('.blocked_domain_delete').click(function (e) {
    e.preventDefault()
    url = $(this).attr('href')
    if (!confirm('Are you sure you want to delete?'))
      return;
    window.location = $(this).attr('href')
  });
  $('.blocked_email_delete').click(function (e) {
    e.preventDefault()
    url = $(this).attr('href')
    if (!confirm('Are you sure you want to delete?'))
      return;
    window.location = $(this).attr('href')
  });
  $('.assigned_users').select2();
  $(".list_filter_row_contacts").hide()
  $(".list_filter_row_domains").hide()
  $(".list_filter_row_emails").hide()
  // $(".filter_toggle").click(function () {
  //   $(".list_filter_row").toggle();
  //   $(".list_filter_row_contacts").hide();
  // });
  $(".filter_toggle_contacts").click(function () {
    $(".list_filter_row_contacts").toggle();
    $(".list_filter_row_emails").hide();
    $(".list_filter_row_domains").hide();

  });

  $(".filter_toggle_emails").click(function () {
    $(".list_filter_row_emails").toggle();
    $(".list_filter_row_domains").hide();
    $(".list_filter_row_contacts").hide();

  });

  $(".filter_toggle_domains").click(function () {
    $(".list_filter_row_domains").toggle();
    $(".list_filter_row_emails").hide();
    $(".list_filter_row_contacts").hide();

  });

  $("#open a[rel='page']").click(function (e) {
    e.preventDefault();
    $('#contacts_filter').attr("action", $(this).attr("href"));
    $('#contacts_filter').submit();
  });

  $("#blocked_domains a[rel='page']").click(function (e) {
    e.preventDefault();
    $('#filter_domains_form').attr("action", $(this).attr("href"));
    $('#filter_domains_form').submit();
  });

  $("#blocked_emails a[rel='page']").click(function (e) {
    e.preventDefault();
    $('#filter_emails_form').attr("action", $(this).attr("href"));
    $('#filter_emails_form').submit();
  });


</script>
{% endblock js_block %}
